/* @group Navbar */

/* @group Custom Menu */

.navbar {
  .navbar-inner {
    .brand {
      color: ~"[[setting:themenavcolor]]";
    }

    .btn-navbar {
      .icon-bar {
        background-color: ~"[[setting:themecolor]]";
      }
    }

    .dropdown-menu {
      border: 1px solid ~"[[setting:themecolor]]";
    }

    .nav > li.dropdown a,
    .nav > li > a {
      color: ~"[[setting:themenavcolor]]";
      i {
        color: inherit;
      }
      &:hover {
        color: ~"[[setting:themecolor]]";
        background-color: ~"[[setting:themenavcolor]]";
        i {
          color: inherit;
        }
      }
    }

    .nav > li.dropdown ul.dropdown-menu > li {
      > a {
        color: ~"[[setting:themeurlcolor]]";
        &:hover {
          color: @white; // TODO: Page background colour needs to be a setting.
          background-color: ~"[[setting:themeurlcolor]]";
        }
        &:focus, &.open {
          color: @white; // TODO: Page background colour needs to be a setting.
          background-color: ~"[[setting:themeurlcolor]]";
          i {
            color: @white; // TODO: Page background colour needs to be a setting.
          }
        }
        &:hover .dimmed_text {
          color: @grayLighter;
        }
        i {
          color: ~"[[setting:themeiconcolor]]";
        }
      }
      &.dropdown-submenu:hover > a {
        color: @white; // TODO: Page background colour needs to be a setting.
        background-color: ~"[[setting:themeurlcolor]]";
        i {
          color: inherit;
        }
      }
    }

    .nav {
      li.dropdown {
        &.open > .dropdown-toggle, &.active > .dropdown-toggle, &.open.active > .dropdown-toggle {
          color: @white; // TODO: Page background colour needs to be a setting.
          background-color: ~"[[setting:themehovercolor]]";
          i {
            color: inherit;
          }
        }
      }
    }

    .usermenu {
      .dropdown {
        img.userpicture {
          border: 1px solid ~"[[setting:themenavcolor]]";
        }
        ul.dropdown-menu {
          border: 1px solid ~"[[setting:themecolor]]";
          hr.sep {
            border-bottom: 1px dotted ~"[[setting:themecolor]]";
          }
        }
      }
    }

    .messagemenu {
      ul.nav {
        ul.dropdown-menu {
          border: 1px solid ~"[[setting:themecolor]]";
          li > a {
            border-top: 1px dotted ~"[[setting:themecolor]]";
            &:hover {
              .message, .notification {
                color: @white; // TODO: Page background colour needs to be a setting.
                background-color: ~"[[setting:themehovercolor]]";
                img {
                  &.userpicture, &.profilepicture {
                    box-shadow: 0 0 3px ~"[[setting:themenavcolor]]";
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

/* @end */

/* @end */